<template>
    <div style="display: flex;width: 100%;height: 100vh; background-color: black;">
        <!-- 左边 -->
        <div style="width: 50%;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <W网页和代码基础 :代码="代码" :访问路径="访问路径" :组件名="组件名"/>
        </div>
        <!-- 右边 -->
        <div style="width: 50%;background-color: rgba(25, 8, 36, 0.521);color: aliceblue; min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 180px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="组件修改">刷新组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 选中项绑定值 -->
                    <div :style='样式1'>
                        <h4>选中项绑定值 : </h4>
                        <spen :style='样式2'>英: v_model,类型:string/number/object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.v_model'
                            size='small'></el-radio-group></div>
                    <!-- 选项的数据源， value 和 label 可以通过 CascaderProps 自定义. -->
                    <div :style='样式1'>
                        <h4>选项的数据源， value 和 label 可以通过 CascaderProps 自定义. : </h4>
                        <spen :style='样式2'>英:options,类型:object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.options'
                            size='small'></el-radio-group></div>
                    <!-- 配置选项, 请参阅下面 CascaderProps 表。 -->
                    <div :style='样式1'>
                        <h4>配置选项, 请参阅下面 CascaderProps 表。 : </h4>
                        <spen :style='样式2'>英:props,类型:object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.props'
                            size='small'></el-radio-group></div>
                    <!-- 尺寸 -->
                    <div :style='样式1'>
                        <h4>尺寸 : </h4>
                        <spen :style='样式2'>英:size,类型:enum,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'>
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group></div>
                    <!-- 输入框占位文本 -->
                    <div :style='样式1'>
                        <h4>输入框占位文本 : </h4>
                        <spen :style='样式2'>英:placeholder,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.placeholder' size='small'>
                            <el-radio label="占位例子">有例子</el-radio>
                            <el-radio label="">无 </el-radio>

                        </el-radio-group></div>
                    <!-- 是否禁用 -->
                    <div :style='样式1'>
                        <h4>是否禁用 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.disabled' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group></div>
                    <!-- 是否支持清空选项 -->
                    <div :style='样式1'>
                        <h4>是否支持清空选项 : </h4>
                        <spen :style='样式2'>英:clearable,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.clearable' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group></div>
                    <!-- 输入框中是否显示选中值的完整路径 -->
                    <div :style='样式1'>
                        <h4>输入框中是否显示选中值的完整路径 : </h4>
                        <spen :style='样式2'>英:show_all_levels,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.show_all_levels'
                            size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group></div>
                    <!-- 多选模式下是否折叠Tag -->
                    <div :style='样式1'>
                        <h4>多选模式下是否折叠Tag : </h4>
                        <spen :style='样式2'>英:collapse_tags,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.collapse_tags'
                            size='small'></el-radio-group></div>
                    <!-- 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true -->
                    <div :style='样式1'>
                        <h4>当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true : </h4>
                        <spen :style='样式2'>英:collapse_tags_tooltip,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.collapse_tags_tooltip'
                            size='small'></el-radio-group></div>
                    <!-- 用于分隔选项的字符 -->
                    <div :style='样式1'>
                        <h4>用于分隔选项的字符 : </h4>
                        <spen :style='样式2'>英:separator,类型:string,默认:' / '</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.separator' size='small'>
                            <el-radio label=" - ">有例子" - "</el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group></div>
                    <!-- 该选项是否可以被搜索 -->
                    <div :style='样式1'>
                        <h4>该选项是否可以被搜索 : </h4>
                        <spen :style='样式2'>英:filterable,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filterable' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group></div>
                    <!-- 搜索关键词正在输入时的去抖延迟，单位为毫秒 -->
                    <div :style='样式1'>
                        <h4>搜索关键词正在输入时的去抖延迟，单位为毫秒 : </h4>
                        <spen :style='样式2'>英:debounce,类型:number,默认:300</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.debounce'
                            size='small'>
                            <el-radio label="500">有例子延迟500 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group>
                        </div>
                    <!-- 过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise，那么接下来的过滤逻辑便不会执行。 -->
                    <div :style='样式1'>
                        <h4>过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise，那么接下来的过滤逻辑便不会执行。 : </h4>
                        <spen :style='样式2'>英:before-filter,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.before_filter'
                            size='small'></el-radio-group></div>
                    <!-- 标签类型 -->
                    <div :style='样式1'>
                        <h4>标签类型 : </h4>
                        <spen :style='样式2'>英:tag_type,类型:enum,默认:info</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tag_type'
                            size='small'>
                            <el-radio label="success">成功 </el-radio>
                            <el-radio label="info">信息 </el-radio>
                            <el-radio label="warning">危险 </el-radio>
                            <el-radio label="danger">警告 </el-radio>
                            <el-radio label="">无 </el-radio>
                        </el-radio-group></div>
                    <!-- 输入时是否触发表单的校验 -->
                    <div :style='样式1'>
                        <h4>输入时是否触发表单的校验 : </h4>
                        <spen :style='样式2'>英:validate_event,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.validate_event'
                            size='small'></el-radio-group></div>
                    <!-- 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 -->
                    <div :style='样式1'>
                        <h4>需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 : </h4>
                        <spen :style='样式2'>英:max_collapse_tags,类型:number,默认:1</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.max_collapse_tags'
                            size='small'></el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>

    </div>
</template>
<script setup>
import W网页和代码基础 from "../网页和代码基础.vue"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 路由 = proxy.router
const 库 = proxy.lib
const API = proxy.API
const 组件名 = ref('级联选择器')
const 属性 = ref({
    v_model: '',//选中项绑定值
    options: '',//选项的数据源， value 和 label 可以通过 CascaderProps 自定义.
    props: '',//配置选项, 请参阅下面 CascaderProps 表。
    size: '',//尺寸
    placeholder: '',//输入框占位文本
    disabled: '',//是否禁用
    clearable: '',//是否支持清空选项
    show_all_levels: '',//输入框中是否显示选中值的完整路径
    collapse_tags: '',//多选模式下是否折叠Tag
    collapse_tags_tooltip: '',//当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
    separator: '',//用于分隔选项的字符
    filterable: '',//该选项是否可以被搜索
    debounce: '',//搜索关键词正在输入时的去抖延迟，单位为毫秒
    before_filter: '',//过滤函数调用前，所要调用的钩子函数，该函数接收要过滤的值作为参数。 如果该函数的返回值是 false 或者是一个被拒绝的 Promise，那么接下来的过滤逻辑便不会执行。
    tag_type: '',//标签类型
    validate_event: '',//输入时是否触发表单的校验
    max_collapse_tags: '',//需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。



})

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 10px;font-size: 14px;')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')

const 删除颜色 = () => {
    属性.value.color = ""
}

const 代码 = ref('')
const 访问路径 = ref('http://localhost:3000/#/gocascader')

const 组件修改 = async () => {
    访问路径.value = ""
    let 结果 = await API.组件修改(组件名.value, 属性.value, "", "")
    if (结果.err == 'ok') {
        代码.value = 结果.msg
        访问路径.value = 结果.url
        console.log("访问路径", 访问路径.value)
        ElMessage.success("修改成功")
    } else {
        访问路径.value = 结果.url
        ElMessage.error("错误:" + 结果.err)
    }

}




// const 按钮模板 =proxy.lib.按钮膜拜

</script>
<style lang="scss"  scoped>
h4 {
    background-color: rgb(65, 104, 75);
    text-align: center;
}
</style>
